<template>
  <view class="work-detail flexc">
    <view class="flex1 over center">
      <view class="wrap">
        <view class="flex-between box">
          <view class="t">作品分类</view>
          <view class="">作品分类</view>
        </view>
        <view class="flex-between box">
          <view class="t">作品名称</view>
          <view class="">作品分类</view>
        </view>
        <view class="flex-between box">
          <view class="t">作品价格</view>
          <view class="">作品分类</view>
        </view>
        <view class="box">
          <view class="t">作品头图</view>
          <view class="upload">
            <view class="img">图片</view>
          </view>
        </view>
        <view class="box">
          <view class="t">作品简介</view>
          <view class="des">
            作品简介作品简介作品简介作品简介作品简介作品简介
          </view>
          <view class="upload1">
            <view class="img">图片</view>
          </view>
        </view>
        <view class="box">
          <view class="t">作品头图</view>
          <view class="box1 flex">
            <view class="flex1">图片</view>
            <image src="@/static/image/down.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="btn flex-between">
      <view class="" @click="btn(0)">{{ type == 2 ? "上架" : "下架" }}</view>
      <view class="" @click="btn(1)">修改</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 1, //默认下架 2--上架
    };
  },
  methods: {
    btn(k) {
      if (k == 0) {
        const content =
          this.type == 2 ? "确定上架该作品吗？" : "确定下架该作品吗？";
        uni.showModal({
          content,
          cancelText: "取消",
          cancelColor: "#000000",
          confirmColor: "#F49C0D",
          confirmText: "确认",
          success: (res) => {
            if (res.confirm) {
              //确定事件
            }
          },
        });
      } else {
        //修改跳转并回显数据
        this.toRoute({
          path: "/publish-word",
          query: {
            type: 2,
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.work-detail {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  .center {
    background: #f6f6f6;
    padding: 24upx 32upx;
    .wrap {
      background: #ffffff;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      padding: 34upx 24upx 40upx;
      .box {
        font-size: 24rpx;
        color: #000000;
        margin-bottom: 30upx;
        .t {
          font-weight: bold;
        }
        .upload1,
        .upload {
          margin: 20upx 0 4upx;
          .img {
            width: 202upx;
            height: 202upx;
            margin-right: 16upx;
            background: #f6f6f6;
          }
        }
        .des {
          margin-top: 14upx;
        }
        .upload1 {
          margin: 28upx 0 4upx;
        }
      }
      .box1 {
        height: 64rpx;
        background: #f6f6f6;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        box-sizing: border-box;
        padding: 0 24upx;
        margin-top: 20upx;
        & > image {
          width: 32upx;
          height: 28upx;
        }
      }
    }
  }
  .btn {
    padding: 8upx 32upx;
    & > view {
      width: 334rpx;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      text-align: center;
      line-height: 80upx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
